<!DOCTYPE html>
<html lang="en" xmlns="http://www.w3.org/1999/xhtml" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>预产池列表</title>
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <link rel="shortcut icon" href="/favicon.ico" type="image/x-icon"/>
    <!-- load css -->
    <link rel="stylesheet" th:href="@{/css/font.css}"/>
    <link rel="stylesheet" th:href="@{/css/xadmin.css}"/>
    <script type="text/javascript" th:src="@{/js/jquery.min.js}"></script>
    <script th:src="@{/js/layui/layui.js}" charset="utf-8"></script>
    <script type="text/javascript" th:src="@{/js/xadmin.js}"></script>
</head>
<body class="layui-anim layui-anim-fadein">
<div class="x-nav">
      <span class="layui-breadcrumb">
        <a>预产池管理</a>
        <a><cite>预产池列表</cite></a>
      </span>
    <a class="layui-btn layui-btn-small" style="line-height:1.6em;margin-top:3px;float:right"
       href="javascript:location.replace(location.href);" title="刷新">
        <i class="layui-icon" style="line-height:30px">ဂ</i></a>
</div>
<div class="x-body">
    <div class="layui-row">
        <div class="layui-form layui-col-md12 x-so">
            <input id="amount" type="text" name="amount" placeholder="金额" autocomplete="off" class="layui-input">
            <div class="layui-input-inline">
                <select id="status" name="status">
                    <option value="">全部</option>
                    <option value="1">正常</option>
                    <option value="0">禁用</option>
                </select>
            </div>
            <div class="layui-input-inline">
                <select id="pay_type" name="pay_type">
                    <option value="">全部</option>
                    <option value="alipay">支付宝</option>
                    <option value="wechat">微信</option>
                </select>
            </div>
            <button id="searchBtn" data-type="reload" class="layui-btn" lay-submit="" lay-filter="sreach"><i
                    class="layui-icon">&#xe615;</i></button>
        </div>
    </div>
    <xblock>
        <button class="layui-btn" onclick="x_admin_show('新增','/admin/paypool/addPage.html',495,450)"><i
                class="layui-icon"></i>新增
        </button>
    </xblock>
    <table class="layui-hide" id="table1" lay-filter="tool1"></table>
    <script type="text/html" id="bar1">
        {{#  if(d.status == 1){ }}
        <a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del">禁用</a>
        {{#  }else{  }}
        <a class="layui-btn layui-btn-normal layui-btn-xs" lay-event="del">启用</a>
        {{#  }  }}
        <a class="layui-btn layui-btn-normal layui-btn-xs" lay-event="update"
           onclick="x_admin_show('修改信息','/admin/paypool/updatePage.html?id={{d.id}}',465,550)">修改</a>
        <a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="remove">删除</a>
    </script>
</div>
<script type="text/html" id="statusTpl">
    {{#  if(d.status == 1){ }}
    <span style="color: green;">启用中</span>
    {{#  }else{  }}
    <span style="color: red;">禁用中</span>
    {{#  }  }}
</script>
<script type="text/html" id="payTypeTpl">
    {{#  if(d.pay_type == 'wechat'){ }}
    <span style="color: green;">微信</span>
    {{#  }else{  }}
    <span style="color: green;">支付宝</span>
    {{#  }  }}
</script>
<script>
    layui.use(['laydate', 'laypage', 'table'], function () {
        var laydate = layui.laydate,
            table = layui.table, //表格
            laypage = layui.laypage; //分页
        //执行一个 table 实例
        table.render({
            elem: '#table1'
            , height: 650
            , limit: 14
            , limits: [14, 20, 30, 40, 50, 60, 70, 80, 90]
            , url: '[[@{/admin/paypool/list.html}]]' //数据接口
            , id: 'table1'
            , page: true
            , cols: [
                [
                    {field: 'id', title: 'ID', width: '6%', sort: true, align: 'center', fixed: 'left'}
                    , {field: 'amount', title: '金额', width: '10%', align: 'center'}
                    , {field: 'pay_url_count', title: '产码数量', width: '8%', align: 'center'}
                    , {field: 'status', title: '状态', width: '7%', templet: '#statusTpl', align: 'center'}
                    , {field: 'pay_type', title: '支付类型', width: '8%', templet: '#payTypeTpl', align: 'center'}
                    , {field: 'remarks', title: '备注', width: '8%', align: 'center'}
                    , {fixed: 'right', title: '操作', align: 'center', toolbar: '#bar1', width: '29%'}
                ]
            ]
        });
        $('#searchBtn').on('click', function () {
            var index = layer.msg('查询中，请稍候...', {icon: 16, time: false, shade: 0});
            table.reload('table1', {
                page: {
                    curr: 1 //重新从第 1 页开始
                }
                , where: {
                    'amount': $('#amount').val(),
                    'status': $('#status').val(),
                    'pay_type': $('#pay_type').val(),
                }
            });
            layer.close(index);
        });

        //监听工具条
        table.on('tool(tool1)', function (obj) { //注：tool是工具条事件名，test是table原始容器的属性 lay-filter="对应的值"
            var data = obj.data //获得当前行数据
                , layEvent = obj.event; //获得 lay-event 对应的值
            if (layEvent === 'remove') {
                layer.confirm('确认删除？', function (index) {
                    $.post('[[@{/admin/paypool/remove.html}]]', {'id': data.id}, function (data) {
                        layer.close(index);
                        layer.msg(data.msg);
                        if (data.code == 0) {
                            table.reload('table1', {
                                page: {
                                    curr: $(".layui-laypage-em").next().html() //重新从第 1 页开始
                                }
                                , where: {
                                    'amount': $('#amount').val(),
                                    'status': $('#status').val()
                                }
                            });
                        }
                    })
                    //向服务端发送删除指令
                });
            } else if (layEvent === 'del') {
                layer.confirm('确认操作？', function (index) {
                    $.post('[[@{/admin/paypool/updateStatus.html}]]', {
                        'id': data.id,
                        'status': data.status
                    }, function (data) {
                        layer.close(index);
                        layer.msg(data.msg);
                        if (data.code == 0) {
                            table.reload('table1', {
                                page: {
                                    curr: 1 //重新从第 1 页开始
                                }
                                , where: {
                                    'amount': $('#amount').val(),
                                    'status': $('#status').val()
                                }
                            });
                        }
                    })
                    //向服务端发送删除指令
                });
            }
        });
    });
</script>
</body>
</html>
